<template>
  <div>
      <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>用户功能</el-breadcrumb-item>
      <el-breadcrumb-item>油料购买</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
        <!-- 搜索与添加区域 -->
      <el-row :gutter="40">
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true;getOilName()">添加商品</el-button>
        </el-col>
        <el-col :span="4" >
          <el-tag type="success">总价格：{{sumPrice}}</el-tag>
        </el-col>
        <el-col :span="4" :offset="12">
          <el-button type="success" @click="addOrder">确认购买</el-button>
        </el-col>
      </el-row>
      
      <!-- 用户列表区域 -->
      <el-table :data="proList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="油料名" prop="oilName"></el-table-column>
        <el-table-column label="单价" prop="price"></el-table-column>
        <el-table-column label="数量/升" prop="number"></el-table-column>
        <el-table-column label="收货地址" prop="address"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="small" @click="removeProById(scope.$index)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加商品的对话框 -->
    <el-dialog title="油料列表" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
      <!-- 内容主体区域 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
        <el-form-item label="油料名称" prop="oilName">
          <el-select v-model="addForm.oilName" placeholder="请选择" @change="getPrice(addForm.oilName)">
          <el-option
            v-for="item in oilNameList"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input v-model="addForm.price" disabled></el-input>
        </el-form-item>
        <el-form-item label="数量/升" prop="number">
          <el-input v-model="addForm.number" maxlength=6></el-input>
        </el-form-item>
        <el-form-item label="收货地址" prop="address">
          <el-input v-model="addForm.address" placeholder="请精确到市区内"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addToTable">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      //控制添加商品的对话框
      addDialogVisible: false,
      //销售总价
      sumPrice: 0,
      //添加商品表单
      oilNameList: [],
      proList: [],
      addOrderList: {
        orders: [],
        sumPrice: '',
        userName: ''
      },
      addForm: {
        oilName: '',
        price: '',
        number: '',
        address: ''
      },
      addFormRules: {
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
              {
                min: 6,
                max: 15,
                message: '用户密码的长度在6~15个字符之间',
                trigger: 'blur'
              }
            ]
      }
      


    }   
  },
  methods: {
    async getOilName() {
      const {data: res} = await this.$http.get('/sysservice/produce/getNameNum')
      this.oilNameList = res.data.item
    },
    //重置对话框
    addDialogClosed() {
      this.$refs.addFormRef.resetFields()
    },
    //获得相应油料的单价
    async getPrice(val) {
      const {data: res} = await this.$http.get('/sysservice/produce/getprice', {
            params: {proname: val}
            })
      this.addForm.price = res.data.price
    },
    addToTable() {
      let onePrice = this.addForm.price
      let sumNum = this.addForm.number
      this.proList.push({
        //username: window.sessionStorage.getItem('username'),
        oilName: this.addForm.oilName,
        price: this.addForm.price,
        number: this.addForm.number,
        address: this.addForm.address
      })
      this.addOrderList.orders.push({
        //username: window.sessionStorage.getItem('username'),
        oilName: this.addForm.oilName,
        price: this.addForm.price,
        number: this.addForm.number,
        address: this.addForm.address
      })
      
      this.sumPrice = (this.sumPrice + onePrice*sumNum)
      //this.$refs.addFormRef.resetFields()
      //this.addDialogVisible = false
    },
    //删除商品
    removeProById(index) {
      this.proList.splice(index,1)
      this.addOrderList.orders.splice(index,1)  
      let price = 0
      for(let j = 0; j < this.proList.length; j++) {
        let temp = this.proList[j].number
        let number = this.proList[j].price
        price = temp*number
      } 
      this.sumPrice = price
    },
    async addOrder() {
      //this.proList.sumPrice = this.sumPrice
      //console.log(this.proList);
      this.addOrderList.sumPrice = this.sumPrice
      this.addOrderList.userName = window.sessionStorage.getItem('username')
      
      const { data: res } = await this.$http.post('/sysservice/order/addOrder', this.addOrderList)
      //console.log(res);
      
      if (res.code !== 2000) {
          return this.$message.error('下单失败！')
          }
       this.$message.success('下单成功！')
        this.$router.push('/frontuser')
      
    }

  }
}
</script>

<style scoped lang="less">

</style>